<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>太阳系面向对象</title>
    <style type="text/css">
        *{
            margin:0;
            padding: 0;
        }
        canvas{
            display: block;
            background: #000;
            margin: auto;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="900"; height="900";>您的浏览器不支持canvas绘图标签，请您跟换浏览器</canvas>
<script type="text/javascript">

    var can=document.getElementById("canvas");
    var ctx=can.getContext("2d");
    function drawTrack(){
        ctx.strokeStyle="#fff";
        for(var i=0;i<8;i++){
            ctx.beginPath();//开始路径
            ctx.arc(450,450,(i+1)*50,0,Math.PI*2,false);
            ctx.stroke();//空心
        }
    }
    drawTrack();

   //创建星体对象
    function Star(x,y,r,cycle,sColor,eColor){
        this.x=x;
        this.y=y;
        this.r=r;
        this.cycle=cycle;
        this.sColor=sColor;
        this.eColor=eColor;
        this.time=0;
        this.draw=function(){
            ctx.save();
            ctx.translate(450,450);
            ctx.rotate(this.time*Math.PI*(360/cycle)/180);//旋转 弧度 Math.PI*角度
            ctx.beginPath();
            ctx.arc(x,y,r,0,Math.PI*2,false);

             this.color=ctx.createRadialGradient(this.x,this.y,0,this.x,this.y,this.r);
            this.color.addColorStop(0,this.sColor);//起始位置 0 颜色
            this.color.addColorStop(1,this.eColor);//结束为止 1
            ctx.fillStyle=this.color;
            ctx.fill();
            ctx.restore();//释放之前保存的内容
            this.time+=.5;
        }
    }
    //实例化一个太阳
    var sun=new Star(0,0,20,0,"#f00","#ff0");
    //实例化一个水星
    var mer=new Star(50,0,10,88,"#f00","#ff0");
    //金星
    var ven=new Star(100,0,25,224,"#f00","#ff0");
    //地球
    var ear=new Star(150,0,15,365,"#f00","#ff0");
    //火星
    var mar=new Star(200,0,10,687,"#f00","#ff0");
    //木星
    var jup=new Star(250,0,5,4333,"#f00","#ff0");
    //土星
    var sat=new Star(300,0,30,10760,"#f00","#ff0");
    //天王星
    var ura=new Star(350,0,10,30799,"#f00","#ff0");
    //海王星
    var nep=new Star(400,0,25,60512,"#f00","#ff0");

    function move(){
        ctx.clearRect(0,0,900,900);
        drawTrack();
        sun.draw();
        mer.draw();
        ven.draw();
        ear.draw();
        mar.draw();
        jup.draw();
        sat.draw();
        ura.draw();
        nep.draw();
    }

    setInterval(move,30)









</script>
</body>
</html>